<template>
  <van-pagination
    class="paginationBox"
    v-model="activePage"
    :total-items="props.total"
    :items-per-page="props.itemsPerPage"
    :show-page-size="props.showPageSize"
    :force-ellipses="props.forceEllipses"
    @change="emits('pageChange')"
  >
    <template #prev-text>
      <van-icon name="arrow-left" />
    </template>
    <template #next-text>
      <van-icon name="arrow" />
    </template>
    <template #page="{ text }">{{ text }}</template>
  </van-pagination>
</template>

<script setup>
import { computed } from 'vue'
const props = defineProps({
  page: {
    type: Number,
    default: 1,
  },
  total: {
    type: Number,
  },
  itemsPerPage: {
    type: Number,
    default: 10,
  },
  showPageSize: {
    type: Number,
    default: 5,
  },
  forceEllipses: {
    type: Boolean,
    default: true,
  },
})

const emits = defineEmits(['update:page', 'pageChange'])

const activePage = computed({
  get() {
    return props.page
  },
  set(val) {
    emits('update:page', val)
  },
})
</script>

<style lang="scss" scoped>
.paginationBox {
  :deep(.van-pagination__item) {
    color: #333;
  }
  :deep(.van-pagination__item--active) {
    color: #fff;
    background-color: #5aceab;
  }
  :deep(.van-pagination__item:active) {
    color: #fff;
    background-color: #5aceab;
  }
}
</style>
